<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       img{
        width: 300px;
        height: 300px;
       }
    </style>
</head>

<body>
    <h1>商品详情</h1>
    <div>

    </div>
    <script>
        var date = [{
            pid: 0,
            id: 1,
            name: '青花椒烤鱼',
            price: 79,
            img: 'https://ts1.tc.mm.bing.net/th/id/R-C.3f4bb4161eff5c2f9fa1fddbcb129aaf?rik=RgURe%2fIwxxznsQ&riu=http%3a%2f%2fbantianyaoky.18zsb.cn%2fimg%2fproduct%2fproduct_1563931314.jpg&ehk=a8iO1RSAilBnJuCpmQxKnY%2bL6oFnfUd%2fYET4wtarvNU%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1'
        },
        {
            pid: 0,
            id: 2,
            name: '麻辣烤鱼',
            price: 99,
            img: 'https://ts1.tc.mm.bing.net/th/id/R-C.265a3fd24f4718e47d98ef62bbee1a09?rik=l7fd6Lw9fDz6kw&riu=http%3a%2f%2fbantianyaoky.18zsb.cn%2fimg%2fbanner%2fbanner_03.jpg&ehk=BJ55xlT7SeyfOzu%2flwWTGuSx8yNOWAQKuawN4he7nr0%3d&risl=&pid=ImgRaw&r=0'
        },
        {
            pid: 1,
            id: 3,
            name: '羊肉串',
            price: 5,
            img: 'https://ts1.tc.mm.bing.net/th/id/R-C.5b5ff625c18bd8a7f38c637adbad69c5?rik=LGr20SshQb68Ew&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50099%2f7097.jpg_wh860.jpg&ehk=FYc0uKmqt96IrQWlQSDXTZ1Ka1BlkrP3QtnokEtCK7g%3d&risl=&pid=ImgRaw&r=0'
        },
        {
            pid: 1,
            id: 4,
            name: '烤鸡翅',
            price: 10,
            img: 'https://ts1.tc.mm.bing.net/th/id/R-C.cb8db93fec97700287b2ba8d104faf0b?rik=tJA%2fjrRpYGEhDA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50061%2f9442.jpg_wh860.jpg&ehk=SoU2xU9Zl0EgwmjGeF0MKh2Gn6Rx74BZpcEr7oOTNLY%3d&risl=&pid=ImgRaw&r=0'
        },
        {
            pid: 2,
            id: 5,
            name: '啤酒',
            price: 5,
            img: 'https://ts1.tc.mm.bing.net/th/id/R-C.4a731a425e387ecbb76db49f40428ff9?rik=Pj4Dk744ZPkljw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50063%2f0453.jpg_wh1200.jpg&ehk=rwiM4rdoVF%2bll74EB7Y9rBnHgvwicgp51ZrYqIhu2TA%3d&risl=&pid=ImgRaw&r=0'
        },
        {
            pid: 2,
            id: 6,
            name: '果汁',
            price: 3,
            img: 'https://pic.52112.com/180415/181415_128/MFgWfCAXzU_small.jpg'
        }]
        var div = document.querySelector('div')
        var id = location.search.substring(4, location.search.length)
        var item2 = date.find(item => item.id == id)
        div.innerHTML += `
        <img src="${item2.img}">
    <h1>${item2.name}</h1>
    <h1>${item2.price}元/份</h1>
        `
    </script>

</body>

</html>